import store from '@/store'
// 将所有的指令写到这里
let fn = ''

const obj = {
  showAvatar: {
    // bind,inserted,update,componentUpdated,unbind
    // 参数  dom,obj:{value:值} ,vnode:{context:指令所在组件的实例对象}
    inserted(dom, obj) {
      // 没有头像使用默认头像
      dom.src = dom.src || require('@/assets/common/head.jpg')

      // if (!dom.src) {
      //   dom.src = require('@/assets/common/head.jpg')
      // }
      // 头像地址加载出错时使用默认头像(如果有传入对应的头像使用传入的，没有传入才使用默认的)
      // 监听dom内加载出错
      dom.onerror = function() {
        // console.log('onerror')
        // dom.src = require('@/assets/common/head.jpg')
        dom.src = obj.value || require('@/assets/common/head.jpg')
      }
    },
    componentUpdated(dom) {
      dom.src = dom.src || require('@/assets/common/head.jpg')
    }
  },
  abc: {},
  clickOut: {
    // 1:监听所有点击事件  2：在点击事件内判断   3：执行某个代码  4：销毁点击的监听
    inserted(dom, obj) {
      // obj={属性，修饰符，值(value)，指令名}
      // 冒泡
      fn = (e) => {
        // 当前指令所绑定的dom  dom
        // 点击的dom e.target
        if (dom.contains(e.target)) {
          console.log('在dom内')
        } else {
          console.log('dom 外')
          // 点击dom外时执行某个代码
          obj.value()
        }
        console.log('document click')
      }
      document.addEventListener('click', fn)
    },
    unbind() {
      document.removeEventListener('click', fn)
    }
  },
  // v-showButton="'标识'"
  showButton: {
    inserted(dom, obj, vnode) {
      if (!store.state.user.userInfo.roles.points.includes(obj.value)) {
        dom.style.display = 'none'
      }
    }
  }
}
export default {
  install(Vue) {
    Object.keys(obj).forEach((item) => {
      Vue.directive(item, obj[item])
    })
  }
}
